<template>
  <client-only>
  <div class="Page Confirm">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <img src="~/assets/img/cart_setp2.png" class="fr" />
      <div class="clear"></div>
    </div>
    <form name="flowForm" id="flowForm" method="post" action="">
      <table class="GoodList">
        <tbody>
          <tr>
            <th class="name">商品</th>
            <th class="price">原价</th>
            <th class="priceNew">价格</th>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td colspan="3" class="teacher">讲师：{{ order.teacherName }}</td>
          </tr>
          <tr class="good">
            <td class="name First">
              <a
                target="_blank"
                :href="'https://localhost:3000/course/' + order.courseId"
              >
                <img :src="'http://101.37.77.12:9090' + order.courseCover"
              /></a>
              <div class="goodInfo">
                <input type="hidden" class="ids ids_14502" value="14502" />
                <a
                  target="_blank"
                  :href="'https://localhost:3000/course/' + order.courseId"
                  >{{ order.courseTitle }}</a
                >
              </div>
            </td>
            <td class="price">
              <p>
                ￥<strong>{{ order.totalFee }}</strong>
              </p>
            </td>
            <td class="red priceNew Last">
              ￥<strong>{{ order.totalFee }}</strong>
            </td>
          </tr>
          <tr>
            <td class="Billing tr" colspan="3">
              <div class="tr">
                <p>
                  共 <strong class="red">1</strong> 件商品，合计<span
                    class="red f20"
                    >￥<strong>{{ order.totalFee }}</strong></span
                  >
                </p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="Finish">
        <div class="fr" id="AgreeDiv">
          <template>
            <el-radio-group v-model="payType">
              <el-radio :label="1">支付宝</el-radio>
              <el-radio :label="2">微信</el-radio>
            </el-radio-group>
          </template>
          <label
            ><p class="on">
              <input type="checkbox" v-model="checked" />我已阅读并同意<a
                href="https://pay.weixin.qq.com/static/protocol/protocol_normal_v4.shtml"
                target="_blank"
                >《在线教育平台购买协议》</a
              >
            </p></label
          >
        </div>
        <div class="clear"></div>
        <div class="Main fl">
          <div class="fl">
            <a :href="'/course/' + order.courseId">← 返回课程详情页</a>
          </div>
          <div class="fr">
            <p>
              共 <strong class="red">1</strong> 件商品，合计<span
                class="red f20"
                >￥<strong id="AllPrice">{{ order.totalFee }}</strong></span
              >
            </p>
          </div>
        </div>
        <input name="score" value="0" type="hidden" id="usedScore" />
        <button class="fr redb" type="button" id="submitPay" @click="toPay()">
          去支付
        </button>
        <div class="clear"></div>
      </div>
    </form>
  </div>
</client-only>
</template>
<script>
import { getOrderInfoByNo } from "@/api/order";

export default {
  data() {
    return {
      order: {},
      orderNo: "",
      payType: 1,
      checked: true,
      notificationMessage: `<div style="font-family: Arial, sans-serif; line-height: 1.6;">
        <p><strong>一、买家信息：</strong><br>
        1.买家账号:cpfdsf3152@sandbox.com<br>
        2. 登录密码111111<br>
        3.支付密码111111<br>
        <p><strong>二、提示</strong><br>
        点击“去支付”能用到<br>
        <!-- 其他内容... -->
      </div>`
    };

  },
  created() {
    this.orderNo = this.$route.params.orderNo;
    this.getOrderInfoByOrderNo();
  },
  mounted(){
    this.open2()
  },
  methods: {
    open2() {
      this.$notify({
        title: '用户须知',
        message: this.notificationMessage,
        dangerouslyUseHTMLString: true, // 允许使用 HTML 格式的字符串
        duration: 3500
      });
    },
    getOrderInfoByOrderNo() {
      getOrderInfoByNo(this.orderNo).then((resp) => {
        this.order = resp.data.data;
      });
    },
    toPay() {
      if (!this.checked) {
        alert("请先阅读并同意《在线教育平台购买协议》");
        return;
      }
      // 如果是微信支付
      if (this.payType === 1) {
        this.$router.push({
          path: "/pay/" + this.orderNo,
          query: {
            totalFee: this.order.totalFee,
            courseId: this.order.courseId,
          },
        });
      } else {
        // 如果是支付宝支付
        window.open(
          "http://101.37.77.12:9090/order/front_order/aliPay?orderNo=" +
            this.orderNo
        );
        this.$confirm(
          "支付完毕后可点击右上角头像确认支付状态，当前要前往确认支付状态还是返回课程详情页面?",
          "提示",
          {
            confirmButtonText: "确认状态",
            cancelButtonText: "返回课程页面",
            type: "info",
          }
        )
          .then(() => {
            this.$router.push({
              path: "/ucenter",
            });
          })
          .catch(() => {
            this.$router.back();
          });
      }
    },
  },
};
</script>
